<template>
    <div class="aa">
        <div class="aa1">
            <div class="she">
                <img src="../assets/images/sheji.png" style="width: 15px;height: 15px;" />
                <p>设计</p>
            </div>
            <div class="kai">
                <img src="../assets/images/kaifa.png" style="width: 15px;height: 15px;" />
                <p>开发</p>
            </div>
            <div class="yuan">
                <img src="../assets/images/yuan.png" style="width: 15px;height: 15px;" />
                <p>元宇宙</p>
            </div>
        </div>
        <div class="tu">
            <echart :option="option"></echart>
        </div>
    </div>
</template>

<script setup lang='ts'>
import echart from './echart.vue';
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import { getcheng } from '../request/api';
let ranking1 = `/src/assets/images/排名1.png`
let ranking2 = `/src/assets/images/排名2.png`
let ranking3 = `/src/assets/images/排名3.png`
let option = ref({
    legend: {
        show: false,
        data: ['配属', '运用', '厂段修'],
        icon: 'circle',
        bottom: '5%',
        textStyle: {
            color: '#333'
        }
    },
    //提示框
    tooltip: {
        trigger: 'axis',
        showDelay: 0,
        extraCssText: 'padding:15px;font-size:10px',
        // formatter: function (params) {
        //     return params[0].name + '人员总数' + ' : ' + params[0].value + ' 人' + '<br/>' + params[1].name + '工资发放金额' + ' : ' + '¥ ' + params[1].value;
        // },
        axisPointer: {
            show: true,
            type: 'shadow'
        }
    },
    grid: {
        left: '4%',
        right: '10%',
        top: '3%',
        bottom: '13%',
        containLabel: true
    },
    yAxis: [
        {
            type: 'category',
            axisLabel: {
                fontSize: '18px',
                inside: false,
                verticalAlign: 'center',
                padding: [10, 0, 0, 15],
                margin: 20, //刻度标签与轴线之间的距离
                formatter: function (value, index) {
                    if (index < 4) {
                        return `{b|${index + 1}}{a|${value}}`
                    } else {
                        return `{img${index}|} {a|${value}}`
                    }
                },
                rich: {
                    a: {
                        fontSize: '10px',
                        color: '#666666',
                        fontFamily: 'SourceHanSansCN-Regular',
                        padding: [4, 0, 0, 15],
                        width: 10
                    },
                    b: {
                        fontSize: '10px',
                        fontFamily: 'Barlow Condensed SemiBold',
                        color: '#8891B0',
                        padding: [4, 15, 0, 15]
                    },
                    img4: {
                        width: 10,
                        height: 10,
                        backgroundColor: {
                            image: ranking3
                        }
                    },
                    img5: {
                        width: 10,
                        height: 10,
                        backgroundColor: {
                            image: ranking2
                        }
                    },
                    img6: {
                        width: 10,
                        height: 10,
                        backgroundColor: {
                            image: ranking1
                        }
                    }
                }
            },
            data: ['天津', '重庆', '江苏', '广东', '浙江', '上海', '北京'],
            axisLine: {
                show: true
            },
            axisTick: {
                show: true
            }
        }
    ],
    xAxis: [
        {
            type: 'value',
            axisLine: {
                show: true
            },
            axisTick: {
                show: true
            },
            splitLine: {
                show: false // 隐藏 y 轴上的网格线
            },
            splitArea: {
                show: false // 隐藏 y 轴上的背景区域
            }
        },
        {
            type: 'value',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false // 隐藏 y 轴上的网格线
            },
            splitArea: {
                show: false // 隐藏 y 轴上的背景区域
            }
        }
    ],
    series: [
        {
            name: '配属',
            type: 'bar',

            // color: '#a3a7f4',
            xAxisIndex: 0,
            barWidth: 3,
            itemStyle: {
                emphasis: {
                    barBorderRadius: 4
                },
                normal: {
                    barBorderRadius: 4,
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        1,
                        0,
                        [
                            {
                                offset: 0,
                                color: '#00a6fb' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#00c4db' // 100% 处的颜色
                            }
                        ],
                        false
                    ),
                    barBorderRadius: [0, 45, 45, 0]
                }
            },
            label: {
                show: true,
                position: 'right',
                color: '#ccc',
                fontSize: 12,
                formatter: '{c}'
            },
            data: [1, 2, 4, 6, 8, 9, 11]
        }
    ]
})

onMounted(() => {
    getcheng().then(res => {
        const sj = res.data.data.result.slice(0, -5).sort((a, b) => a.total - b.total)

        option.value.series[0].data = sj.map((item, index) => {
            return item.total
        })
    })
})
</script>

<style scoped lang="scss">
.aa {
    width: 100%;
    height: 100%;
    .aa1{
        width: 100%;
        height: 15%;
        display: flex;
        justify-content: space-around;
        .she{
            // border:  1px solid #ccc;
            width: 20%;
            display: flex;
            justify-content: space-around;
            align-items: center;
           background: linear-gradient(to bottom, #8411ff, #2a1d97);
        }
        .kai{
             width: 20%;
            display: flex;
            justify-content: space-around;
            align-items: center;
           background: linear-gradient(to bottom, #8411ff, #2a1d97);
        }
        .yuan{
             width: 20%;
            display: flex;
            justify-content: space-around;
            align-items: center;
           background: linear-gradient(to bottom, #8411ff, #2a1d97);
        }
    }

    .tu {
        width: 100%;
        height: 80%;
    }
}
</style>